<template>
  <page-container
    :show="show"
    close-on-slide-down
    position="bottom"
    z-index="9999"
    round
    @afterleave="hideLogin"
    :duration="500"
  >
    <view class="safe-area-inset-bottom login-popup">
      <k-navbar :customBack="hideLogin" title="绑定"></k-navbar>
      <view class="login-content">
        <view class="logo">
          <k-image
            :src="
              sysInfo?.platformLogo
                ? $TOOL.urlFilter(sysInfo.platformLogo)
                : $TOOL.url('/customer/default_header.png')
            "
          ></k-image>
        </view>
        <uv-button
          type="success"
          v-if="isAgree"
          open-type="getPhoneNumber"
          :custom-style="buttonStyle"
          :color="$CONFIG.SUN_BASE_COLOR"
          @getphonenumber="getPhoneData"
          >手机号快捷登录
        </uv-button>
        <uv-button
          :color="$CONFIG.SUN_BASE_COLOR"
          :custom-style="buttonStyle"
          type="success"
          v-else
          @click="privacyRef.show()"
          >手机号快捷登录
        </uv-button>
        <view class="df-cc mt-20rpx" @click="isChecked = !isChecked">
          <radio
            :checked="isChecked"
            style="transform: scale(0.6)"
            :color="$CONFIG.SUN_BASE_COLOR"
          ></radio>
          <text
            @click.stop="privacyRef.openPrivacyContract()"
            class="text-less-color-1 text-less-size"
            >我已阅读并同意《隐私政策》</text
          >
        </view>
      </view>
    </view>
  </page-container>
  <k-privacy-popup
    :immediate="false"
    ref="privacyRef"
    @disagree="hideLogin"
    @agree="isAgree = true"
  ></k-privacy-popup>
</template>

<script setup>
import { ref } from "vue";
import { isFunction } from "lodash/lang";
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import KPrivacyPopup from '@/components/k-privacy-popup/k-privacy-popup';
import KNavbar from '@/components/k-navbar/k-navbar';
import KImage from '@/components/k-image/k-image';

const userStore = useUserStore();
const { sysInfo } = storeToRefs(userStore);
const privacyRef = ref();
const isChecked = ref(false);
const buttonStyle = {
  width: '690rpx',
  height: '88rpx',
  borderRadius: '20rpx',
};
const show = ref(false);
const isAgree = ref(false);
const callbackFn = ref();
const wxCode = ref("");

const checkLogin = (callback) => {
  uni.checkSession({
    fail: async () => {
      const { code } = await uni.login();
      wxCode.value = code;
    },
  });
  if (userStore.isLogin) {
    show.value = false;
    callback && callback();
  } else {
    callbackFn.value = callback;
    privacyRef.value.show();
    show.value = true;
  }
};
const hideLogin = () => {
  show.value = false;
};

// 注册账户
async function getPhoneData(e) {
  if (!isChecked.value) {
    return uni.showToast({
      icon: 'none',
      title: '请先阅读并同意《隐私政策》',
    });
  }
  show.value = await userStore.registerUser(e, wxCode.value);
  // 登录成功回调
  if (!show.value && isFunction(callbackFn.value)) {
    callbackFn.value();
  }
}

defineExpose({ show, checkLogin, hideLogin });
</script>

<style scoped lang="scss">
.login-popup {
  height: 100vh;
  background: #ffffff;

  .login-content {
    padding-top: 236rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    width: 140rpx;
    height: 140rpx;
    background: #d9d9d9;
    border-radius: 50%;
    border: 4rpx solid rgba(118, 182, 107, 0.5);
    overflow: hidden;
    margin-bottom: 50rpx;
  }
}
</style>
